Custom pages and transitions topic

DuckRouter uses the Pages API from Flutter to handle the conversions to Routes.

To have a page animate with a custom transition, we can use DuckPage:

class CustomPageTransitionLocation extends Location {
  const CustomPageTransitionLocation();

  @override
  String get path => 'custom-page-transition';

  @override
  LocationPageBuilder get pageBuilder => (context) => DuckPage(
        child: HomeScreen(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) =>
            FadeTransition(opacity: animation, child: child),
      );
}

In this case DuckPage will create a custom route for you. This means that to specify a non-default route, such as a dialog, we need to override DuckPage.

Let's take the case of a dialog (but you can implement any type of Route in this way):

class DialogPage<T> extends DuckPage<T> {
  const DialogPage({
    required this.builder,
  }) : super.custom();

  final WidgetBuilder builder;

   @override
   Route<T> createRoute(context, settings) => DialogRoute<T>(
         context: context,
         settings: settings,
         builder: (context) => Dialog(
           child: builder(context),
         ),
       );
 }

We can then use this page like so:

class DialogPageLocation extends Location {
  const DialogPageLocation();

  @override
  String get path => 'dialog-page';

  @override
  LocationPageBuilder get pageBuilder=> (context) => DialogPage(
    name: path,
    builder: ...
  );
}

And to open it, all we do is:

DuckRouter.of(context).navigate(to: DialogPageLocation);

Classes

DuckPage<T>

DuckPage allows you to create a custom page, such as a modal, with DuckRouter, and can provide more control over the transition and behavior of a page.

DuckPage<T>

DuckPage allows you to create a custom page, such as a modal, with DuckRouter, and can provide more control over the transition and behavior of a page.

DuckPage<T>

DuckPage allows you to create a custom page, such as a modal, with DuckRouter, and can provide more control over the transition and behavior of a page.

DuckRouter

Creates a DuckRouter.

DuckRouter

Creates a DuckRouter.